[iOS] 超簡単に処理中のUIを出せるSVProgressHUDについて
はじめに
SVProgressHUDとは、タスクが進行中であることを簡潔に表示することができるUIです。 このライブラリでは、このトップに表示されるビューをHUDと呼んでおり、ここでもそう呼ぶことにします。
SVProgressHUD on Appetize.io.においてデモを確認することができます。 一発でイメージをつかめると思いますので、是非お試しください。
SVProgressHUDは、MITライセンスで公開されており、CocoaPodで簡単にインストールが可能です。
pod 'SVProgressHUD', :git => 'https://github.com/SVProgressHUD/SVProgressHUD.git'
なお、2016年2月現在、GitHubのmasterの最新は、2.0-beta8です。 GitHubを指定しないで、Cocoapodsから落とすと、バージョンは、1.1.3となり、かなり機能不足ですので 、GitHubのリポジトリ指定をお勧めします。
ライブラリの導入後は、下記のインポートで利用可能になります。
#import "SVProgressHUD.h"
2 HUDの表示
HUDの表示は、次のインスタンスメソッドで簡単に行うことができます。
showメソッドで、単純に表示します。
[SVProgressHUD show]; // インジケータのみ
文字を一緒に表示する場合は、showWithStatusを使用します。
[SVProgressHUD showWithStatus:@"Status"]; // 文字列付き
showProgressだと、指定角度(0.0〜1.0)までインジケータを進めます。
[SVProgressHUD showProgress:0.3]; // 指定分だけインジケータを進める //[SVProgressHUD showProgress:0.3 status:@"Status"]; // 指定分だけインジケータを進める(文字付きはこちら)
この場合、上記のようにとまってしまうので、アプリで逐次進める必要があります。 次のコードは、その一例です。
float progress; - (IBAction)tapButton:(id)sender { progress = 0.1; [SVProgressHUD showProgress:progress]; // 0.3秒後にintevalを呼ぶ [self performSelector:@selector(interval) withObject:nil afterDelay:0.3f]; } - (void)interval { progress += 0.1f;// 数値を上げて [SVProgressHUD showProgress:progress]; // HUD表示 if(progress < 1.0f){ // 0.3秒後にintervelを呼ぶ [self performSelector:@selector(interval) withObject:nil afterDelay:0.3f]; } else { // HUDを消す [SVProgressHUD dismiss]; } }
3 HUDの消去
dismissで直ちにHUDを消去します。
<br /> [SVProgressHUD dismiss]; // 直ちに消去 // [SVProgressHUD dismissWithDelay:0.5]; // 0.5秒後に消去
4 HUDのポップアップ
次のコードで、 HUDを一定時間ポップアップします。 表示される時間は、0.5〜5秒間、指定したメッセージの長さに依存します。
<br />[SVProgressHUD showInfoWithStatus:(NSString *)@"Infomation"];
<br />[SVProgressHUD showErrorWithStatus:@"ERROR"];
<br />[SVProgressHUD showSuccessWithStatus:@"Success"];
<br />UIImage *image = [UIImage imageNamed:@"classmethod.png"]; [SVProgressHUD showImage:image status:@"Classmethod, Inc."];
5 スタイル
setDefaultStyleを使用してスタイルを変更できます。
<br />[SVProgressHUD setDefaultStyle:SVProgressHUDStyleDark];
指定できるのは、次の3種類です。
- SVProgressHUDStyleLight // デフォルト
- SVProgressHUDStyleDark
- SVProgressHUDStyleCustom
最後のものSVProgressHUDStyleCustomを使用して、次の設定しました。
[SVProgressHUD setDefaultStyle:SVProgressHUDStyleCustom]; [SVProgressHUD setForegroundColor: [UIColor yellowColor]]; [SVProgressHUD setBackgroundColor: [UIColor redColor]];
6 マスク
setDefaultMaskTypeを使用して、HUDを表示している間の、バックの状態を指定できます。
[SVProgressHUD setDefaultMaskType:SVProgressHUDMaskTypeBlack];
指定できるのは、次の4種類です。
- SVProgressHUDMaskTypeBlack
- SVProgressHUDMaskTypeClear // バッグのUIは操作できない
- SVProgressHUDMaskTypeGradient
- SVProgressHUDMaskTypeNone //バッグのUIも操作できる
SVProgressHUDMaskTypeClearとSVProgressHUDMaskTypeNoneは、見た目は同じですが、バッグになっているUIを操作できるかどうか違いがあります。
6 アニメーション
setDefaultAnimationTypeを使用して、アニメメーションの種類を変更できます。
[SVProgressHUD setDefaultAnimationType:SVProgressHUDAnimationTypeNative];
指定できるのは、次の2種類です。
- SVProgressHUDAnimationTypeFlat // デフォルト
- SVProgressHUDAnimationTypeNative
7 カスタム
上記の他にも、次のようなメソッドが用意されており、きめ細かく設定できそうです。
// default is CGSizeZero, can be used to avoid resizing for a larger message + (void)setMinimumSize:(CGSize)minimumSize; // default is 2 pt + (void)setRingThickness:(CGFloat)width; // default is 18 pt + (void)setRingRadius:(CGFloat)radius; // default is 24 pt + (void)setRingNoTextRadius:(CGFloat)radius; // default is 14 pt + (void)setCornerRadius:(CGFloat)cornerRadius; // default is [UIFont preferredFontForTextStyle:UIFontTextStyleSubheadline] + (void)setFont:(UIFont*)font; // default is [UIColor blackColor], only used for SVProgressHUDStyleCustom + (void)setForegroundColor:(UIColor*)color; // default is [UIColor whiteColor], only used for SVProgressHUDStyleCustom + (void)setBackgroundColor:(UIColor*)color; // default is the bundled info image provided by Freepik + (void)setInfoImage:(UIImage*)image; // default is bundled success image from Freepik + (void)setSuccessImage:(UIImage*)image; // default is bundled error image from Freepik + (void)setErrorImage:(UIImage*)image; // default is nil, only used if #define SV_APP_EXTENSIONS is set + (void)setViewForExtension:(UIView*)view; + (void)setMinimumDismissTimeInterval:(NSTimeInterval)interval;
8 通知
SVProgressHUDでは、次の4種類の通知が実装されています。
- SVProgressHUDWillAppearNotification //アニメーション開始
- SVProgressHUDDidAppearNotification // アニメーション完了
- SVProgressHUDWillDisappearNotification // アニメーションの消える前
- SVProgressHUDDidDisappearNotification // アニメーションが消えた後
このNitificationを通信センターに登録しておくと、それぞれのタイミングで処理を記述することが可能になります。
- (void)viewDidLoad { [super viewDidLoad]; [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(willDisappearNotification) name:SVProgressHUDWillDisappearNotification object: nil]; [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(didDisappearNotification) name:SVProgressHUDDidDisappearNotification object: nil]; [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(willAppearNotification) name:SVProgressHUDWillAppearNotification object: nil]; [[NSNotificationCenter defaultCenter] addObserver: self selector: @selector(didAppearNotification) name:SVProgressHUDDidAppearNotification object: nil]; }
上記のようにNSNotificationCenterを設定すれば、下記のそれぞれのメソッドで通知を受け取ることができます。
<br />- (void) didDisappearNotification { NSLog(@"DidDisappearNotification"); } - (void) willDisappearNotification { NSLog(@"WillDisappearNotification"); } - (void) willAppearNotification { NSLog(@"DidDisappearNotification"); } - (void) didAppearNotification { NSLog(@"DidAppearNotification"); }
画像をクリックすると動作が確認できます。
9 最後に
SVProgressHUDを使用すると、非常に簡単に処理中の表現が可能です。 一世代前より設定できる項目も増えているようなので今回まとめてみました。
10 参考資料
https://github.com/SVProgressHUD/SVProgressHUD
https://cocoapods.org/pods/SVProgressHUD